Having the right tools for the job always make the job a lot easier (and fun). Imagine trying to drive a nail into wood when all you have is a saw. That would be like trying to design and develop a website by using notepad. It certainly can be done, just like you can try to use the saw to ‘hammer’ the nail in, but it will be much better if you had a hammer for the task.
If you have the right tools then you are half way there, the other half is knowing how to use your tools correctly.
Note that the term ‘website design’ is not the same as ‘website development’. Website design refers to process of deciding the look and feel of the website, its layout, color scheme, etc. Website development is the process of programming and implementing the entire solution.
In this guide I will outline the software applications you will need for designing and developing PHP websites.
Development Steps
Before we proceed, it is important that you understand the typical workflow. Although this may be different for some cases, the pattern for most cases is as follows:
- build the website on your local machine
- test completely on your local machine
- upload to a hidden folder (www.yourwebsiteurl.com/yourhiddenfolder) on the production server and do the final set of tests (also invite a few people to test with you)
- move the website to the public view once everything is good (www.yourwebsiteurl.com)
The Offline Web Server Software
To setup your computer for development you will need to setup the necessary software that can run your PHP website locally. Normally you need to install and configure Apache web server, PHP and MySQL. To setup and configure these components separately can be a hassle and sometimes this is a major stumbling block for new developers.
There are however, several packages that bundle these key components into one installation unit. On a windows machine, you will be able to use XAMPP or WAMP Server. I recommend WAMP server and I have written an article “WAMP Server Setup Guide” that will help you to get up and running with WAMP in no time.
Website Design Software & Tools
To design the website you will need software that will allow you to create your layout concept graphically. There are many software that are available for this task, but one that I recommend is Adobe Illustrator. Adobe illustrator is a powerful software that allows you to easily define a layout concept for your website. You can then use the design output for your clients to review and to guide your development.
Image Processing Software
Image processing is a very important component to website development. Background images, logos and other images appearing on your website must be properly processed and optimized for the web.
Aims of images processing:
- Sizing to the right dimensions to avoid stretching or aspect ratio issues.
- Image optimization for the web, this is selecting the right balance between storage size and the image quality.
- Save images in the correct file format for example, .jpg, .png, etc.
The are many software that can do all of this, but the recommended software is Adobe Photoshop. Adobe Photoshop comes with all the right features to allow you to prepare your images for the web.
IDE Software
Selecting the right Integrated Development Environment (IDE) can also be a daunting task for new developers. Of course you can use simple tools like Notepad++, but to really be able to develop professional websites you will need an all inclusive IDE. My recommendation for the job is Adobe Dreamweaver. Adobe Dreamweaver (got to love the name) combines everything you need in one place, version control, FTP client, code inspection, W3C validation, etc. See more here.
Web Browsers
You must ensure that your website functions correctly on all the available web browsers. In order to test this you will need to install a version of all the browsers on your machine. If however, you are following standard rules for HTML and CSS programming then in most cases you should not have many issues. To see the most up-to-date web browser stats, go to here.
FTP Client
While Dreamweaver has a pretty impressive FTP client feature, you will also need an FTP client for doing other advance stuff on the live web server when you are ready for deployment. Task like changing file and folder permissions are better handled by a streamlined FTP client. The one I recommend is CuteFTP. There are many others that are available for less or even for free and the possibility exist that you might be able to find one even better than the one I recommend.
In summary, here are the tools you need:
- WAMP Server (Free, link)
- Adobe Illustrator (around $599, link)
- Adobe Photoshop (around $699, link)
- Adobe Dreamweaver (around $399, link)
- CuteFTP Professional ($60, link)
Thank you for reading and I hope this will help you on your road to becoming an elite developer. Let us hear from you if you have any questions or comment. Happy coding.
Written by Girendra Persaud (November 2012)
[nrelate-related]
